<template>
  <div class="container">
    <el-card class="box-card">
      <div class="wall">
        <h2 :class="[isWall?'active':'']" @click="cutWall(0)">表白墙</h2>/
        <h2 :class="[!isWall?'active':'']" @click="cutWall(1)">机遇墙</h2>
      </div>
      <!-- 机遇区域-->
      <div class="interact" v-if="!isWall">
        <div class="divide">
          <span class="title" :class="[isInteract?'active':'']" @click="cutInteract(true)">推荐机遇</span>
          <span class="title" :class="[!isInteract?'active':'']" @click="cutInteract(false)">留下机遇</span>
        </div>
        <Recommend v-if="isInteract" @goleave="goleave"></Recommend>
        <Leave v-else></Leave>
      </div>
      <!-- 表白墙区域 -->
      <div class="list" v-else>
        <div class="divide">
          <span class="title" :class="[isActive?'active':'']" @click="cutsort('time')">最新榜单</span>
          <span class="title" :class="[!isActive?'active':'']" @click="cutsort('heat')">热度表白</span>
        </div>
        <!-- 列表展示组件 -->
        <WallTemplate :wallsData="confessionData" v-if="confessionData.length !== 0"></WallTemplate>
        <div v-else>努力加载数据中，请稍等</div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入子组件
import WallTemplate from "@/views/wall_template/index.vue";
import Recommend from "@/views/confessionWall/recommend/index.vue";
import Leave from "@/views/confessionWall/leave/index.vue";
// 引入封装计算滚动距离函数
import { getRollLength } from "@/schema/getRollLength";
export default {
  data() {
    return {
      // 控制两个墙之间的切换
      isWall: true,
      // 控制机遇页面的
      isInteract: true,
      // confessionData: [], //表白墙数据
      isActive: true, //控制排序类型的切换
      num: 0, //获取数据的开始值
      isWait: true, //控制是否需要等待请求
    };
  },
  created() {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    //页面离开后销毁监听事件
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 切换墙的函数
    cutWall(data) {
      // 判断
      if (data === 0) {
        this.isWall = true;
      } else {
        this.isWall = false;
      }
    },
    // 切换机遇页面函数
    cutInteract(data) {
      this.isInteract = data;
    },
    // 子组件想跳转到留下机遇页面的回调
    goleave() {
      this.isInteract = false;
    },
    // 切换排序
    cutsort(sort) {
      this.num = 0; //重设开始值
      if (sort === "time") {
        this.isActive = true; // 切换时间排序
        this.getconfession();
      } else if (sort === "heat") {
        this.isActive = false; // 切换热度排序
        this.getconfessionByheat();
      }
    },
    // 获取表白墙时间数据回调
    async getconfession() {
      this.$store.dispatch("getconfession", this.num).then((res) => {
        if (res.result) {
          // 恢复节流 可以继续请求
          this.isWait = true;
        } else {
          return this.$message(res.message);
        }
      });
    },
    // 获取表白墙热度数据回调
    async getconfessionByheat() {
      this.$store.dispatch("getconfessionByheat", this.num).then((res) => {
        if (res.result) {
          // 恢复节流 可以继续请求
          this.isWait = true;
        } else {
          return this.$message(res.message);
        }
      });
    },
    // 滚动事件回调
    handleScroll() {
      // 去判断是否触底
      let result = getRollLength();
      // 判断返回值是否为true
      if (result) {
        // 判断是否可以发起请求
        if (this.isWait) {
          this.num += 5;
          this.isWait = false;
          // 判断当前的模块，来获取不同数据
          if (this.isActive) {
            //时间排序
            this.getconfession();
          } else {
            //热度排序
            this.getconfessionByheat();
          }
        }
      }
    },
  },
  mounted() {
    this.$message({
      type: "success",
      message: "谢谢你来看我,愿你也能被爱和有所爱",
    });
    // 获取表白墙数据
    this.getconfession();
  },
  components: {
    WallTemplate,
    Recommend,
    Leave,
  },
  computed: {
    confessionData() {
      // 判断当前板块 返回不同排序的值
      if (this.isActive) {
        return this.$store.state.wish.confessiondatatime;
      } else {
        return this.$store.state.wish.confessiondataheat;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  padding-top: 10px;
}
.el-card {
  width: 1000px;
  min-height: 500px;
  margin: 0 auto;
  .wall {
    display: flex;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 10px;
    h2 {
      color: #8590a6;
      margin: 0 5px;
      cursor: pointer;
    }
    .active {
      color: #008c8c;
      font-weight: 700;
    }
  }
  // 互动展示区域
  .interact {
    // height: 200px;
    margin-bottom: 20px;
    .divide {
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #008c8c;
      .title {
        color: #8590a6;
        cursor: pointer;
        margin-right: 20px;
      }
      .active {
        font-weight: 700;
        color: #008c8c;
      }
      .title:hover {
        color: #008c8c;
      }
    }
  }
  // 列表展示区域
  .list {
    .divide {
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #008c8c;
      .title {
        color: #8590a6;
        cursor: pointer;
        margin-right: 20px;
      }
      .active {
        font-weight: 700;
        color: #008c8c;
      }
      .title:hover {
        color: #008c8c;
      }
    }
  }
}
</style>